import { BrowserRouter as Router, Route, Link, Switch, useLocation,useParams,useHistory } from "react-router-dom";

export default function ModalGalleryExample() {
    return (
        <Router>
            <ModalSwitch />
        </Router>
    )
}

const IMAGES = [
    { id: 0, title: "Dark Orchid", color: "DarkOrchid" },
    { id: 1, title: "Lime Green", color: "LimeGreen" },
    { id: 2, title: "Tomato", color: "Tomato" },
    { id: 3, title: "Seven Ate Nine", color: "#789" },
    { id: 4, title: "Crimson", color: "Crimson" }
];

function ModalSwitch() {
    let location = useLocation();
    let background = location.state && location.state.background;
    console.log("location.state");
    console.log(location.state);
    return (
        <div>
            <Switch>
                <Route exact path="/">
                    <Home />
                </Route>
                <Route path="/gallery">
                    <Gallery />
                </Route>
                <Route path="/img/:id">
                    <ImageView />
                </Route>
            </Switch>

            {/* 有background的时候显示 Modal */}
            {/* background 有值的时候，两个 /img/:id 的path 都会命中吗? */}
            {
                background && <Route path="/img/:id">
                    <Modal/>
                </Route>
            }
        </div>
    )
}

function Home() {
    return (
        <div className="P-home">
            <Link to="/gallery">Visit the Gallery</Link>
            <h2>Featured Images</h2>
            <ul>
                <li>
                    <Link to="/img/2">Tomato</Link>
                </li>
                <li>
                    <Link to="/img/4">Crimson</Link>
                </li>
            </ul>
        </div>
    );
}

function Image({color}){
    return (
        <div style={{
            width: "100%",
            height: 400,
            background: color
        }}></div>
    )
}
//图片视图
function ImageView() {
    let {id} = useParams();
    let image = IMAGES[parseInt(id,10)];
    if(!image) return <div>Image not found</div>;
    return (
        <div>
            <h2>Image View</h2>
            <h3>{image.title}</h3>
            <Image color={image.color}/>
        </div>
    );
}

function Gallery(){
    let location = useLocation();
    return (
        <div>
            <h2>Gallery</h2>
            {
                IMAGES.map(i=>{
                    return (
                        <Link key={i.id} to={{pathname: `/img/${i.id}`,state: {
                            background: location
                        }}}>
                            <Thumbnail color={i.color}/> 
                            <i>{i.title}</i>
                        </Link>
                    )
                })
            }
        </div>
    )
}

function Thumbnail({color}){
    return (
        <div className="P-thumbnail" style={{
            width: '100%',
            height: 200,
            background: color,
            borderColor: '1px solid #e1e1e1'
        }}></div>
    )
}

function Modal(){
    let history = useHistory();
    let {id} = useParams();
    let image = IMAGES[parseInt(id, 10)];
    if(!image) return null;
    let back = e=>{
        e.stopPropagation();
        history.goBack();
    }
    return (
        <div onClick={back} style={{position: 'absolute',top: 0,left: 0,bottom: 0,right: 0,background: "rgba(0,0,0,0.15)"}}>
            <div className="modal" style={{
                position: "absolute",
                background: "#fff",
                top: 25,
                left: '10%',
                right: '10%',
                padding: 15,
                border: '2px solid #444'
            }}>
                <h1>{image.title}</h1>
                <Image color={image.color}/>
                <button type="button" onClick={back}>close</button>
            </div>
        </div>
    )
}

//如何动态添加路由记录呢?
// 如何通过API 实现跳转呢，push 和 repleace ，还有刷新